<template>
  <div class="v-slot-select">
    <MDropdown :disabled="computedIsModelDisabled">
      <div
        class="g-jc-sb g-pd-l-8"
        :class="computedIsModelDisabled ? 'g-disabled' : 'g-pointer'"
      >
        <div class="g-flex-1">
          {{ locale.getNameByModelId(slotValue?.value as string, selectedOption?.label) }}
        </div>
        <div
          v-show="selected"
          class="g-flex-0 g-pd-lr-4"
        >
          <img src="statics/icons/app/iconlist2.png" />
        </div>
      </div>
      <template #dropdown>
        <!-- <MDropdownMenuItem @click="emit('deleteSlotValue')">{{$t('空')}}</MDropdownMenuItem> -->
        <MDropdownMenuItem
          v-for="item in options"
          :key="item.value"
          @click="handleClickItem(item)"
        >
          {{ locale.getNameByModelId(item.value, item.label) }}
        </MDropdownMenuItem>
      </template>
    </MDropdown>
  </div>
</template>
<script lang="ts" setup>
import { computed, Ref, inject } from "vue";

import { PropertyDropdownOption, CreateSpecification, InstanceSlotData, SlotValue } from "../../types";
import { propertyUtil } from "../../PropertyUtil";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { SlotEditKey } from "@/constants/constants";
import { UpdateSlotValueDto } from "@/modules/model/service/dto";
import { modelService } from "@/modules/model/service";
import { locale } from "@/util/locale";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

const computedIsModelDisabled = computed(() => {
  return props.slotData.propertyId === "ValidationRule-ruleType" ? true : isModelDisabled.value;
});

const props = defineProps<{
  instanceId: string;
  projectId: string;
  slotData: InstanceSlotData;
  slotValue: SlotValue | undefined | null;
  slotKey: SlotEditKey;
  readonly?: boolean;
  isMultiplicity?: boolean;
  nullable?: boolean;
  selected?: boolean;
}>();

const options = computed(() => {
  return props.slotData.items;
});

const selectedOption = computed(() => {
  const row = props.slotData;
  if (row.items) {
    return row.items.find(it => it.value === props.slotValue?.value);
  } else {
    return null;
  }
});

async function handleClickItem(item: PropertyDropdownOption) {
  const slotData = props.slotData;

  if (props.slotKey === SlotEditKey.TagValue) {
    const slotValue = slotData.values.find(k => k.id === props.slotValue?.id);
    if (slotValue) {
      slotValue.value = item.value;
    }
    const values = slotData.values.map(k => k.value);

    const dto: UpdateSlotValueDto = {
      projectId: props.projectId,
      dataType: slotData.dataType,
      instanceId: props.instanceId!,
      isMultiplicity: slotData.isMultiplicity!,
      key: slotData.propertyId,
      updateMethod: "",
      value: values
    };
    await modelService.updateSlotValue(dto);
  } else {
    const dto: CreateSpecification = {
      projectId: props.projectId,
      propertyId: slotData.propertyId,
      slotId: slotData.slotId,
      parentId: props.instanceId!,
      value: item.value,
      valueSpecificationId: props.slotValue?.id,
      key: props.slotKey
    };
    await propertyUtil.updatePropertySlotAndFresh(dto);
  }
}
</script>
